<template>
    <div>
        <h2>son</h2>
        <div> father give me ${{props.money}} <button @click="addMoney">加钱</button></div>
        <div><span ref="scorespan">分数{{score}}</span> <button @click="score++">加分</button></div>
        <slot name="hand" wallet="爱马仕钱包"></slot>
    </div>
</template>

<script setup>
//组合式api
// props  property properties attr  attribute
import {useAttrs,watch,onMounted,nextTick,watchEffect,ref,getCurrentInstance} from 'vue'
let props=defineProps({
    money:Number
});
let sonemits=defineEmits(["add-money"])


let attrs=useAttrs();
console.log('attrs===>',attrs);


//this.$parent 获取父组件对象
let me=getCurrentInstance();//获取当前组件实例对象
let parent=me.parent;
console.log("parent===>",parent);


//声明的ref的名称 要和 dom里面 ref=""对应
let scorespan=ref(null);// this.$refs.scorespan
onMounted(()=>{
    console.log("onMounted获取span元素===>",scorespan.value)
})
let score=ref(80);
let randomColor=()=>{
    return `rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`
}
watch(score,(newValue,oldValue)=>{
    nextTick(()=>{//等数据更新完成 渲染完成后在获取最新dom元素
        scorespan.value.style.color=randomColor();
    });
    console.log("恭喜加分项===>",newValue,oldValue);
});
watchEffect(()=>{
    console.log("watchEffect监听变化===>",score.value);
});


let addMoney=()=>{
    sonemits("add-money",'孩子需要加钱');
}


</script>

<style scoped>

</style>